<template>
  <div>
    <div class="container">
      <!--<keep-alive include="front">-->
      <router-view/>
      <!--</keep-alive>-->
    </div>
    <div class="tab_bar">
      <router-link v-for="(page,index) in pages" :to="{path: page.path}" :key=index class="tab">
        <div class="iconOut">
          <div class="icon-body">
            <svg class="icon pic" aria-hidden="true">
              <use :xlink:href="page.src"></use>
            </svg>
          </div>
          <div class="tab_text">{{page.name}}</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    /** kebab-case */
    data() {
      return {
        Img: `${this.$Public.ossImg}`,
        src: ['home', 'cart', 'user'],
        pages: [
          {
            name: '首页',
            path: 'front',
            src: '#icon-shouye2'
          },
          {
            name: '购物车',
            path: 'cart',
            src: '#icon-gouwuchex-'
          },
          // {
          //     name: '订单',
          //     path: 'OrderList',
          //     src: '#icon-dhl_dd'
          // },
          {
            name: '个人中心',
            path: 'user',
            src: '#icon-gerenzhongxin'
          }
        ]
      };
    },
    created() {
    },
    methods: {
      // switchImg(index) {
      //     this.pages.forEach((item, i) => {
      //         item.src = this.src[i];
      //     });
      //     this.pages[index].src = this.src[index] + '_active';
      // }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .tab_bar
    position fixed
    bottom 0
    left 0
    width 100vw
    display flex
    flex-direction row
    justify-content center
    height 12vw
    background #fff
    a
      color #999
    .iconOut {
      flex-y();
      &.icon-center {
        .tab_text {
          margin-top 1vw
        }
      }
    }
    & .icon-wrapper {
      width: 8vw;
      height: 8vw;
      border(white, 3px)
      background: gradient-color;
      margin-top: -6vw;
      border-radius(50%);
      flex-y();
      & img {
        margin-top 1vw
        width: 5vw;
        height: 5vw;
      }
    }

  .tab
    display flex
    flex-direction column
    justify-content center
    align-items center
    flex 1
    height 12vw

  & .icon-body {
    position relative
  }

  & .icon {
    width vw(25)
    height vw(25)
    vertical-align: -0.15em;
    overflow: hidden;
  }

  & .pic {
    fill #999
  }

  &.router-link-active {
    .pic {
      fill sec-color
    }
    .tab_text {
      color sec-color
    }
  }

  .tab_img {
    width: 6vw;
    height: 5vw;
  }

  .tab_text
    font-size 3vw
    margin-top: 2px;

  .container
    margin-bottom 12vw
</style>
